<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />  
<meta http-equiv="Pragma" content="no-cache" />  
<meta http-equiv="Expires" content="0" /> 
<meta charset="utf-8" name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>养修预约</title>
 	<link rel="stylesheet" href="../components/bootstrap/dist/css/bootstrap.min.css">  
    <link href="../components/mobisscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../components/bootstrapValidator/css/bootstrapValidator.css" type="text/css" />
	<script type="text/javascript" src="../components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../components/mobisscroll/js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript" src="../components/hammer/hammer.min.js"></script>
    <script type="text/javascript" src="../components/hammer/jquery.hammer.js"></script>
    
    <script src="../components/bootstrapValidator/js/bootstrapValidator.js"></script>
    <script type="text/javascript" src="../js/common/common.js"></script>
    <script type="text/javascript" src="../js/common/wechatCommon.js"></script>
    <script type="text/javascript" src="../js/maintain/maintain.js"></script>

<style type="text/css">
input[type=radio] {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 28px;
	-webkit-appearance: none;
	background-color: transparent;
	border: 0;
	outline: 0 !important;
	line-height: 20px;
	color: #d8d8d8;
}

input[type=radio]:after {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	line-height: 14px;
	font-size: 16px;
	color: #fff;
	border: 3px solid #ddd;
	background-color: #fff;
	box-sizing: border-box;
}

input[type=radio]:checked:after {
	content: "L";
	transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
	-webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0);
	border-color: #EF3F3F;
	background-color: #EF3F3F;
}

<!--
a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

-->
.placeholders {
	margin-bottom: 30px;
	text-align: center;
}

.placeholders h4 {
	margin-bottom: 0;
}

.placeholder {
	margin-bottom: 20px;
}

.placeholder img {
	display: inline-block;
	border-radius: 50%;
}

.underline_model {
	padding-bottom: 5px;
	border-bottom: 1px solid #eee;
}

.center-vertical {
	margin-top: 25px;
}

/* Carousel */
#myCarInfos {
	padding: 0 10px 30px 10px;
	margin-top: 10px;
	/* Control buttons  */
	/* Previous button  */
	/* Next button  */
	/* Changes the position of the indicators */
	/* Changes the color of the indicators */
}

.carousel-caption {
	max-width: 550px;
	padding: 0 10px;
	margin: 0 auto;
	margin-top: 200px;
	text-align: center;
	left: 150px;
}

#myCarInfos .carousel-control {
	background: none;
	color: #CACACA;
	font-size: 2.3em;
	text-shadow: none;
	margin-top: 30px;
}

#myCarInfos .carousel-control.left {
	left: -60px;
}

#myCarInfos .carousel-control.right {
	right: -60px;
}

#myCarInfos .carousel-indicators {
    right: 50%;
    top: 47%;
    bottom: 0px;
    margin-right: -19px;
}
#myCarInfos .carousel-indicators li {
    width: 30px;
    height: 30px;
    margin: 5px;
    cursor: pointer;
    border: 4px solid #CCC;
    border-radius: 30px;
    opacity: 0.4;
    overflow: hidden;
    transition: all 0.4s;
}
#myCarInfos .carousel-indicators .active {
    background: #333333;
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border-color: #f33;
    opacity: 1;
    overflow: hidden;
}

.carousel-inner {
	min-height: 100px;
}

.item blockquote {
	border-left: none;
	margin: 0;
}

.item blockquote p:before {
	content: "\f10d";
	font-family: 'Fontawesome';
	float: left;
	margin-right: 10px;
}
</style>


</head>
<body>
<div id="myTabContent" class="tab-content">	
	<div  id="maintainMainDiv" class="container formValidate  tab-pane fade" style="padding: 10px 10px 0px 10px"
		data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
		data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
		data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">


		<div class="row ">
			<div class="col-md-12 col-xs-12 col-sm-12" data-wow-delay="0.2s">

				<div id="myCarInfos" class="carousel slide" data-ride="carousel"></div>
			</div>
		</div>
		<form class="form-horizontal" role="form">
			<div class="form-group has-feedback">
				<!-- <label for="maintainType" class="col-sm-2 control-label">预约类型</label> -->
				<div class="col-sm-10">
					<select name="appointType" id="appointType" class="form-control" style="padding: 6px 40px">
						<option value="0" selected>保养</option>
						<option value="1">活动</option>
						<option value="2">维修</option>
						<option value="3">其他</option>
					</select>
					<span class="glyphicon glyphicon-wrench form-control-feedback" style="left:15px;"></span>
				</div>
			</div>
			<p>
			<div class="form-group has-feedback">
				<!-- <label for="activeTime" class="col-sm-2 control-label">到店时间</label> -->
				<div class="col-sm-10">
					    <a id="selectMaintainTimeLink" class="list-group-item" href="#" onclick="selectMaintainTime(this)" style="padding: 6px 40px">
					    <span id="selectMaintainTimeSpan" class="glyphicon glyphicon-chevron-right form-control-feedback" style="text-align:right;"></span>
							选择到店时间
					    </a> <span class="glyphicon glyphicon-calendar form-control-feedback" style="left:15px;"></span>
				</div>
			</div>
			<!-- 隐藏的到店日期和到店时间，方便传递参数 -->
			<input type="hidden" id="maintainDate" name="maintainDate" value="">
			<input type="hidden" id="maintainTime" name="maintainTime" value="">
			<p>
			<div class="form-group has-feedback">
				<!-- <label for="mileage" class="col-sm-2 control-label">当前里程</label> -->
				<div class="col-sm-10">
					<input type="text" name="mileage" id="mileage"
						style="padding: 6px 40px" class="form-control"
						placeholder="请输入当前里程" required data-bv-notempty-message="此项必填"> 
						<span class="glyphicon glyphicon-dashboard form-control-feedback" style="left:15px;"></span>
				</div>
			</div>

			<p>
			<div class="form-group has-feedback">
				<!-- <label for="seviceUser" class="col-sm-2 control-label">服务顾问</label> -->
				<div class="col-sm-10">
					<select name="seviceUser" id="seviceUser" class="form-control" placeholder=""
						style="padding: 6px 40px">
					</select>
					<span class="glyphicon glyphicon-user form-control-feedback" style="left:15px;"></span>
				</div>
			</div>
			
			<p>
			<div class="form-group has-feedback">
				<!-- <label for="maintainName" class="col-sm-2 control-label">联系人</label> -->
				<div class="col-sm-10">
					<input type="text" name="maintainName" id="maintainName"
						style="padding: 6px 40px" class="form-control"
						placeholder="请输入联系人" required data-bv-notempty-message="此项必填">
						<span class="glyphicon glyphicon-user form-control-feedback" style="left:15px;"></span>
				</div>
			</div>
			<p>
			<div class="form-group has-feedback">
				<!-- <label for="phone" class="col-sm-2 control-label">手机号码</label> -->
				<div class="col-sm-10">
					<input type="text" name="phone" id="phone"
						style="padding: 6px 40px" class="form-control"
						 placeholder="请输入手机号码"
					 required
                     data-bv-notempty-message="此项必填"
                     pattern="^1[0-9]{10}$"
                     data-bv-regexp-message="只能是数字,必须是11位且正确输入"
                     minlength="11"
                     maxlength="11"
                     data-bv-stringlength-message="长度至少是11">
                     <span class="glyphicon glyphicon-phone form-control-feedback" style="left:15px;"></span>
				</div>
			</div>

			<div class="form-group has-feedback">
				<div class="col-sm-10">
					<textarea name="remarks" id="remarks" class="form-control" rows="4"
						style="padding: 6px 40px" class="form-control"
						placeholder="输入您要提交的内容"></textarea>
						<span class="glyphicon glyphicon-envelope form-control-feedback" style="left:15px;"></span>
				</div>
			</div>

			<p>
			<p>

			<div class="form-group has-feedback">
				<div class="col-sm-10">
				<button style="background-color: #31AFF7" id="immediatelyAppoint" type="button"
					class="btn btn-primary btn-lg btn-block">预约</button>
				</div>
			</div>
			<p>
				<input type="hidden" id="vin" name="vin" value=""> 
				<input type="hidden" id="modelName" name="modelName" value=""> 
				<input type="hidden" id="sourceType" name="sourceType" value="10011001"/>
					
			</form>		
		</div>
	</div>
	
	<!-- 选择养修预约时间-二级页面 -->
	<div id="maintainDateSelDiv" class="container tab-pane fade">
		<p>
		<div class="input-group input-group-m">
			<span class="input-group-addon">选择保养日期</span>
			<input id="maintainDateSelectText" size="16" type="text"  value=""
                 placeholder="选择日期" class="form-control datetime input-sm" onchange=changeDatePickText(this)>
		</div>
		<br>
		
		<div class="input-group input-group-m">
			<span class="input-group-addon">选择保养时间</span>
			<label id="maintainTimeSelectLabel" class="form-control"></label>
		</div>

		 
		<div id="timeSelectRadioGroup" class="input-group input-group-m" style="font-size: 18px;">
		</div>
		<br>
		<p>
			<button id="timeConfirmBtn" type="button" class="btn btn-primary btn-m btn-block" onclick="confirmMaintainTime(this)">确定</button>
		<p>
		
		<div id="maintainInputErrDiv" class="container tab-pane fade">
			<div id="maintainInputErrLabel" class="alert alert-danger"></div>
		</div>
	</div>
	<script type="text/javascript">
	
	$("#maintainDateSelDiv").hide();
		$('.form_datetime').datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			autoclose : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
			showMeridian : 1
		});

		function validat() {
			$('.formValidate').bootstrapValidator('validate');
			var isValid = $(".formValidate").data("bootstrapValidator")
					.isValid();

			return isValid;

		}
	</script>
		<!-- 模态框（Modal） -->
<div class="modal fade" id="sureModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" align="left">
		<!-- - <button type="button" class="close" data-dismiss="modal" 
						aria-hidden="true">
				</button> -->
				<h4 class="modal-title" style="text-align:center">
					尊敬的客户，您好！
				</h4>
			</div>
			<div class="modal-body" style="text-align:center;font-size:20px;">
			您已成功预约了这次养修！
			</div>
			<div class="modal-footer">
			   <center>
					<button type="button" class="btn btn-default" onclick="re()">确定
					</button>
			   </center>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>